<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		.css-wrap {
		    position: absolute;
		    top: 50%;
		    left: 50%;
		    transform: translate(-50%, -50%);
		/* } */
	</style>
	<body>
		<section class="css-wrap">
			<svg width="200px" height="200px" version="1.1" xmlns="http://www.w3.org/2000/svg">
			    <text class="liquidFillGaugeText" text-anchor="middle" font-size="42px" transform="translate(100,120)" style="fill: #000">50.0%</text>
			    <!-- Wave -->
			    <g id="wave">
			        <path id="wave-2" fill="rgba(154, 205, 50, .8)" d="M 0 100 C 133.633 85.12 51.54 116.327 200 100 A 95 95 0 0 1 0 100 Z">
			        <animate dur="5s" repeatCount="indefinite" attributeName="d" attributeType="XML" values="M0 100 C90 28, 92 179, 200 100 A95 95 0 0 1 0 100 Z;
			                                    M0 100 C145 100, 41 100, 200 100 A95 95 0 0 1 0 100 Z;
			                                    M0 100 C90 28, 92 179, 200 100 A95 95 0 0 1 0 100 Z"></animate>
			        </path>
			    </g>
			    <circle cx="100" cy="100" r="80" stroke-width="10" stroke="white" fill="transparent"></circle>
			    <circle cx="100" cy="100" r="90" stroke-width="20" stroke="yellowgreen" fill="none" class="percentage-pie-svg"></circle>
			</svg>
		</section>
	</body>
</html>
